<template>
  <div class="mine">
    <!-- 背景颜色 -->
    <div class="bg"></div>
    <!-- {{userall}} -->
    <!-- 显示弹窗 -->
    <van-popup v-model="showp">
      <van-image cover width="10rem" height="10rem" :src="userall.userFace" />
    </van-popup>
    <!-- 用户显示 -->
    <div class="userinfo">
      <div class="flex">
        <div class="flex_item">
          <p>账户余额</p>
          <p>{{ userall.balance }}</p>
        </div>
        <div class="flex_item">
          <van-button
            round
            size="large"
            type="info"
            class="van-btn"
            @click="jmpRechage(userall.id)"
            > 充值界面 </van-button
          >
        </div>
      </div>

      <div class="cellArea">
        <van-cell
          title="修改个人信息"
          icon="orders-o"
          is-link
          @click="jmpPerson(userall)"
          class="van-cell van-cell--clickable"
        >
        </van-cell>
        <van-cell
          title="常用地址"
          icon="location-o"
          is-link
          @click="jmpMyAddress(userall)"
          class="van-cell van-cell--clickable"
        >
        </van-cell>
        <van-cell
          title="联系我们"
          icon="phone-o"
          is-link
          @click="jmpGetContact()"
          class="van-cell__value van-cell__value--alone"
        >
        </van-cell>
      </div>
    </div>

    <!-- 用户头像 -->
    <div class="userImage">
      <img :src="userall.userFace" alt="" class="imguser" @click="showphoto" />
      <p class="name">{{ userall.username }}</p>
    </div>

    <div class="empty"></div>
    <!-- 退出登录 -->
    <div class="logout_btn">
      <van-button
        type="primary"
        block
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="LoginOut"
        style="border-radius: 8px;"
        >退出登录</van-button
      >
    </div>
  </div>
</template>
<script>
import { get, post } from "@/http/axios";
import { mapActions, mapState } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      //获取当前用户的token
      token: "",
      //获取所有用户数据
      userInfo: "",
      userall: "",
      showp: false,
    };
  },
  methods: {
    //获取所有用户的数据
    async getUserInfo(userall) {
      let obj = {
        token: this.token,
      };
      let res = await get("/user/info", obj);
      this.userall = res.data.data;
    },
    // 跳转充值界面
    jmpRechage(userid) {
      // console.log(userid);
      this.$router.push({
        path: "/manager/minemoney",
        query: {
          customerId: userid,
        },
      });
    },
    //跳转个人信息界面
    jmpPerson(userall) {
      this.$router.push({
        path: "/manager/mineinfo",
        query: userall,
      });
    },
    //
    showphoto() {
      this.showp = true;
    },
    //跳转我的地址
    jmpMyAddress(userall) {
      this.$router.push({
        path: "/manager/mineaddress",
        query: userall,
      });
    },
    //跳转联系界面
    jmpGetContact() {
      Toast.setDefaultOptions({ duration: 3000 });
      Toast("客服电话:19977240718" + "\n" + "反馈邮箱:1019724022@163.com");
    },
    //退出登录
    async LoginOut() {
      let res = await post("/user/logout");
      // console.log(res);
      Toast.success("退出成功！");
      // 定时函数
      setTimeout(() => {
        this.$router.push({
          path: "/login",
        });
        //删除token
        localStorage.removeItem("token");
      }, 500);
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    // 获取用户token
    this.getUserInfo(this.token);
  },
  computed: {},
};
</script>

<style scoped>
.body {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
    Microsoft Yahei, sans-serif;
}
/* 背景 */
.bg {
  height: 180px;
  background: #ff8917;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
/* 用户信息 */
.userinfo {
  width: 80%;
  height: 170px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
  position: absolute;
  top: 170px;
  transform: translate(-50%, -50%);
  left: 50%;
  /* margin-left: -40%; */
  opacity: 0.9;
  border-radius: 8px;
}
.van-button--round {
  border-radius: 20px;
  line-height: 10px;
  height: 10px;
}
/* 用户头像 */
.userImage {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  top: 11%;
}
.userImage p {
  margin-top: 8px;
}
.van-button--info {
  background: linear-gradient(45deg, rgb(255, 96, 52) , rgb(238, 10, 36));
  border: none;

}

.imguser {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.name {
  margin: 3.5em;
  text-align: center;
  margin: 0 auto;
}

.flex {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
  margin-top: 70px;
}
.userinfo .flex .flex_item {
  width: 24%;
  height: 40px;
  text-align: center;
  cursor: pointer;
}
.userinfo .flex .flex_item p:first-child {
  margin-top: 15px;
  font-size: 16px;
  color: #999;
}
.userinfo .flex .flex_item p:last-child {
  font-size: 22px;
  margin-top: -10px;
  color: #ee0a24;
}
.flex_item:first-child {
  margin-top: 15px;
  font-size: 16px;
  color: #999;
}
.van-btn {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 44px;
  margin: 0;
  cursor: pointer;
  line-height: 1.2;
  text-align: center;
  margin-top: 40px;
}
.cellArea {
  margin: 110px auto;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  transition: all 0.3s ease 0s;
  width: 95%;
  border-radius: 8px;
  overflow: hidden;
}

.van-cell--clickable {
  cursor: pointer;
}
.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
.empty {
  width: 80%;
  height: 200px;
  /* border: 1px solid rebeccapurple; */
  margin: 0 auto;
  margin-top: 28%;
}
.logout_btn {
  width: 53%;
  height: 100px;
  text-align: center;
  color: rgb(255, 255, 255);
  border-radius: 22px;
  line-height: 40px;
  margin: 2em auto 0px;
  cursor: pointer;
}
</style>